<template>
  <header class="bg-white">
    <nav
      class="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8"
      aria-label="Global"
    >
      <div class="flex lg:flex-1">
        <a href="#" class="-m-1.5 p-1.5">
          <span class="sr-only">Your Company</span>
          <img
            class="h-8 w-auto"
            src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
            alt=""
          />
        </a>
      </div>
      <div class="flex lg:hidden">
        <button
          type="button"
          class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
        >
          <span class="sr-only">Open main menu</span>
          <svg
            class="h-6 w-6"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            aria-hidden="true"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
            />
          </svg>
        </button>
      </div>
      <div class="hidden lg:flex lg:gap-x-12">
        <router-link
          to="/shop/shopList"
          active-class="text-red"
          class="text-sm font-semibold leading-6 text-gray-900"
          v-slot="{ isActive }"
        >
          <span :class="{ 'text-[#4f46e5]': isActive }">买车</span>
        </router-link>
        <router-link
          to="/shop/news"
          class="text-sm font-semibold leading-6 text-gray-900"
          active-class="!text-red"
          v-slot="{ isActive }"
        >
          <span :class="{ 'text-[#4f46e5]': isActive }">新闻资讯</span>
        </router-link>
        <router-link
          to="/shopManagement/list"
          class="text-sm font-semibold leading-6 text-gray-900"
          >卖车</router-link
        >
      </div>
      <div class="hidden lg:flex lg:flex-1 lg:justify-end">
        <router-link
          v-if="!useStore.username"
          :to="{ path: '/login' }"
          class="text-sm font-semibold leading-6 text-gray-900"
          >Log in <span aria-hidden="true">&rarr;</span></router-link
        >
        <router-link
          v-else
          :to="{ path: '/welcome' }"
          class="text-sm font-semibold leading-6 text-gray-900"
          >{{ useStore.username }}
          <span aria-hidden="true">&rarr;</span></router-link
        >
      </div>
    </nav>
    <!-- Mobile menu, show/hide based on menu open state. -->
  </header>
</template>
<script lang="ts" setup>
import { useUserStore } from "@/store/modules/user";
const useStore = useUserStore();
</script>
